<%--
  Created by IntelliJ IDEA.
  User: 11843
  Date: 2024/12/26
  Time: 10:57
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.2/echarts.min.js"></script>
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
            crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function () {
        var chart = echarts.init(document.getElementById('main'));

        function fetchData() {
            $.get('cs', function (data) {
                const maleInSchool = data.find(d => d.gender === '1' && d.status === 'A')?.count || 0;
                const maleGraduated = data.find(d => d.gender === '1' && d.status === 'L')?.count || 0;
                const femaleInSchool = data.find(d => d.gender === '0' && d.status === 'A')?.count || 0;
                const femaleGraduated = data.find(d => d.gender === '0' && d.status === 'L')?.count || 0;

                chart.setOption({
                    title: { text: '在籍和不在籍男女生人数' },
                    tooltip: {},
                    legend: { data: ['In School', 'Graduated'] },
                    xAxis: {type: 'category', data: ['Male', 'Female']},
                    yAxis: {type: 'value'},
                    series: [
                        {name: 'In School', type: 'bar', data: [maleInSchool, femaleInSchool]},
                        {name: 'Graduated', type: 'bar', data: [maleGraduated, femaleGraduated]}
                    ]
                });
            }).fail(function (jqXHR, textStatus, errorThrown) {
                console.error('Error fetching data:', textStatus, errorThrown);
            });
        }

        // 初始加载数据
        fetchData();
        // 定时刷新数据
        setInterval(fetchData, 2000);
    });
</script>
</body>
</html>
